<template>
	<div class="map_box">
		<div id="map" ref="mapRef"></div>
	</div>
</template>

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
const mapRef = ref()
window._AMapSecurityConfig = {
	securityJsCode: 'ffcaab64134bd3c5000a53cd5a7bce28'
};
// let AMap: any
const AMap = ref<any>()
const map = ref<any>()
let Marker: any

const player = ref<any>(null)
const location = async () => {
	AMap.value = await AMapLoader.load({
		key: 'c1b8299436555a9eb42f4e897b75d046',
		plugins: ['AMap.moveAnimation'],
		version: '2.0',
		AMapUI: {
			version: '1.1',
			plugins: [], // 需要加载的 AMapUI ui插件
		},
	})
	map.value = await new AMap.value.Map(mapRef.value, {
		// viewMode: '3D',
		zoom: 8,
		center: [116.397751, 39.90247],
		resizeEnable: true, // 监控地图容器尺寸变化，默认值为false
		expandZoomRange: true, // 支持可以扩展最大缩放级别，和zooms属性配合使用，设置为true的时候，zooms的最大级别在PC上可以扩大到20级
		mapStyle: 'amap://styles/normal'
	});
	// 添加插件
	AMap.value.plugin(
		[
			'AMap.Scale',
			'AMap.Polyline',
			'AMap.ToolBar',
			'AMap.HawkEye',
			'AMap.Geolocation',
			'AMap.MapType',
			'AMap.MouseTool',
			'AMap.PolygonEditor',
			'AMap.MarkerCluster',
		],
		function () {
			//异步同时加载多个插件
			// 添加地图插件
			// map.addControl(new AMap.ToolBar()) // 工具条控件;范围选择控件
			map.value.addControl(new AMap.value.Scale()) // 显示当前地图中心的比例尺
			// map.value.addControl(new AMap.HawkEye()) // 显示缩略图
			// map.value.dControl(new AMap.Geolocation()) // 定位当前位置
			// map.valadue.addControl(new AMap.MapType()) // 实现默认图层与卫星图,实时交通图层之间切换
			map.value.addControl(new AMap.value.PolygonEditor()) // 多边形编辑器
			map.value.addControl(new AMap.value.MarkerCluster()) // 聚合组件

			// 以下是鼠标工具插件
			// const mouseTool = new AMap.MouseTool(map)
			// mouseTool.rule();// 用户手动绘制折线图,测量距离
			// mouseTool.measureArea() // 测量面积
		}
	)
	map.value.on('click', (e) => {
		console.log(e, '---mapDisabled.value');
		// const marker = new AMap.value.Marker({
		// 	icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
		// 	position: [e.lnglat.lat,e.lnglat.lng],
		// 	设置 offset 来添加偏移量
		// 	offset: new AMap.value.Pixel(-26, -54),
		// })
	});

}

onMounted(async () => {
	await location()
})
// 在组件卸载前清理
onUnmounted(() => {
	if (map.value) {
		map.value.destroy() // 销毁地图实例
	}
})
defineExpose({
	AMap,
	map
})
</script>

<style scoped lang="scss">
.map_box {
	width: 100%;
	height: 100%
}

#map {
	// min-height: 500px;
	width: 100%;
	height: 100%;
	justify-content: center;
	position: relative;
	border-radius: 10px;
}
</style>
